<template>
  <div class="school-work-analysis">
    <el-card class="analysis-card">
      <template #header>
        <div class="card-header">
          <span>两分五率统计</span>
        </div>
      </template>
      <two-five-rate-table />
    </el-card>
    
    <el-card class="analysis-card">
      <template #header>
        <div class="card-header">
          <span>学优生/学困生分布</span>
          <el-select v-model="selectedSubject" placeholder="请选择学科">
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <student-distribution-chart :subject="selectedSubject" />
    </el-card>
  </div>
</template>

<script>
import TwoFiveRateTable from '../components/TwoFiveRateTable.vue'
import StudentDistributionChart from '../components/StudentDistributionChart.vue'

export default {
  name: 'SchoolWorkAnalysis',
  components: {
    TwoFiveRateTable,
    StudentDistributionChart
  },
  data() {
    return {
      selectedSubject: '',
      subjects: [
        { value: 'MATH', label: '数学' },
        { value: 'CHINESE', label: '语文' },
        { value: 'ENGLISH', label: '英语' }
      ]
    }
  }
}
</script>

<style scoped>
.school-work-analysis {
  padding: 20px;
}
.analysis-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 